@import './assets/Inter/inter.css';
@import './assets/FiraCode/fira_code.css';
@import 'frappe-ui/src/style.css';
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';

.dataframe th {
	@apply whitespace-nowrap border-r border-b bg-gray-50 py-2 px-4 text-left text-sm font-medium text-gray-700;
}
.dataframe td {
	@apply whitespace-nowrap border-r border-b bg-white py-2 px-4 text-right text-sm text-gray-700;
}
.dataframe tr > th:first-child {
	@apply sticky left-0;
}

.font-code {
	@apply !font-mono;
}

.tnum {
	font-feature-settings: 'tnum';
}
/* Code Control */
.cm-editor {
	user-select: text;
	padding: 0px !important;
	position: relative !important;
}
.cm-gutters {
	@apply !border-r !bg-transparent !px-1 !text-center !text-sm !leading-6 !text-gray-600;
}
.cm-gutters {
	@apply !border-r !bg-transparent !text-sm !leading-6 !text-gray-600;
}
.cm-foldGutter span {
	@apply !hidden !opacity-0;
}
.cm-gutterElement {
	@apply !text-center;
}
.cm-activeLine {
	@apply !bg-transparent;
}
.cm-activeLineGutter {
	@apply !bg-transparent text-gray-600;
}
.cm-editor {
	height: 100%;
	width: 100%;
	border-radius: 0.375rem;
	padding: 0.5rem;
	user-select: text;
}

.cm-placeholder {
	@apply !leading-6 !text-gray-500;
}
.cm-content {
	padding: 6px 0px !important;
}

.cm-scroller {
	@apply !font-mono !leading-6 !text-gray-600;
}
.cm-matchingBracket {
	font-weight: 500 !important;
	background: none !important;
	border-bottom: 1px solid #000 !important;
	outline: none !important;
}
.cm-focused {
	outline: none !important;
}
.cm-tooltip-autocomplete {
	border: 1px solid #fafafa !important;
	padding: 0.25rem;
	background-color: #fff !important;
	border-radius: 0.375rem;
	filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}
.cm-tooltip-autocomplete > ul {
	font-family: 'Inter' !important;
}
.cm-tooltip-autocomplete ul li[aria-selected='true'] {
	@apply !rounded !bg-gray-200/80;
	color: #000 !important;
}

@layer components {
	/* Works on Firefox */
	* {
		scrollbar-width: thin;
		scrollbar-color: #c0c6cc #ebeef0;
	}

	html {
		scrollbar-width: auto;
	}

	/* Works on Chrome, Edge, and Safari */
	*::-webkit-scrollbar-thumb {
		background: #e2e8f0;
		border-radius: 6px;
	}

	*::-webkit-scrollbar-track,
	*::-webkit-scrollbar-corner {
		background: #f8fafc;
	}

	*::-webkit-scrollbar {
		width: 0px;
		height: 6px;
	}

	body::-webkit-scrollbar {
		width: 0px;
		height: 12px;
	}
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.1s ease;
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}
